<template>
  <div class="sidebar">
    <div
      v-for="(item, index) in menuItems"
      :key="index"
      class="menu-item"
      @click="selectMenu(item)"
    >
      <h3>{{ item.mingc }}</h3>
    </div>
  </div>
</template>

<script>
import _http from "../httpService";

export default {
  name: "Sidebar",
  props: {
    mokid: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      menuItems: [],
    };
  },

  watch: {
    mokid(newVal) {
      let that = this;
      console.log("Mokid changed:", newVal);

      _http.get("/lanm/yixlllmkLanm/list?mok=" + newVal).then((resp) => {
        if (resp.data.success) {
          that.menuItems = resp.data.result.records;
          this.$emit("menu-selected", that.menuItems[0]);
        }
      });
    },
  },

  mounted() {
    _http.get("/lanm/yixlllmkLanm/list?mok=" + this.mokid).then((resp) => {
        if (resp.data.success) {
          this.menuItems = resp.data.result.records;
          this.$emit("menu-selected", this.menuItems[0]);
        }
      });
  },

  methods: {
    selectMenu(item) {
      this.$emit("menu-selected", item);
    },
  },
};
</script>

<style scoped>
.sidebar {
  width: 250px;
  background-color: #0eb4b6;
  color: white;
  padding: 15px;
}
.menu-item {
  margin: 10px 0;
  cursor: pointer;
}
.menu-item:hover {
  color: #141414;
  background-color: #F0F0F0;
  padding: 10px;
}
</style>
